<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  startDate: {
    type: String,
    required: true
  },
  endDate: {
    type: String,
    required: true
  }
});

const emit = defineEmits(['update-range']);

const startDateInput = ref(props.startDate);
const endDateInput = ref(props.endDate);

// 预设时间范围选项
const rangeOptions = [
  { label: '过去7天', value: '7days' },
  { label: '过去30天', value: '30days' },
  { label: '本月', value: 'thisMonth' },
  { label: '上月', value: 'lastMonth' },
  { label: '全部', value: 'all' }
];

// 计算日期区间描述文字
const dateRangeText = computed(() => {
  return `${startDateInput.value} 至 ${endDateInput.value}`;
});

// 更新日期范围
const updateDateRange = () => {
  if (new Date(startDateInput.value) > new Date(endDateInput.value)) {
    alert('开始日期不能晚于结束日期');
    return;
  }
  
  emit('update-range', {
    startDate: startDateInput.value,
    endDate: endDateInput.value
  });
};

// 应用预设的时间范围
const applyPresetRange = (rangeValue) => {
  const today = new Date();
  let start, end;
  
  switch (rangeValue) {
    case '7days':
      end = new Date();
      start = new Date();
      start.setDate(today.getDate() - 7);
      break;
    case '30days':
      end = new Date();
      start = new Date();
      start.setDate(today.getDate() - 30);
      break;
    case 'thisMonth':
      start = new Date(today.getFullYear(), today.getMonth(), 1);
      end = new Date(today.getFullYear(), today.getMonth() + 1, 0);
      break;
    case 'lastMonth':
      start = new Date(today.getFullYear(), today.getMonth() - 1, 1);
      end = new Date(today.getFullYear(), today.getMonth(), 0);
      break;
    case 'all':
      start = new Date('2023-01-01');
      end = new Date();
      break;
    default:
      return;
  }
  
  // 格式化日期为YYYY-MM-DD
  startDateInput.value = formatDate(start);
  endDateInput.value = formatDate(end);
  
  updateDateRange();
};

// 格式化日期为YYYY-MM-DD
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};
</script>

<template>
  <div class="date-picker-container">
    <div class="date-picker-display">
      <span class="date-range-text">{{ dateRangeText }}</span>
      <button class="edit-btn" @click="$refs.datePickerForm.classList.toggle('show')">
        <span>编辑</span>
      </button>
    </div>
    
    <div ref="datePickerForm" class="date-picker-form">
      <div class="form-group">
        <label>开始日期</label>
        <input type="date" v-model="startDateInput" />
      </div>
      
      <div class="form-group">
        <label>结束日期</label>
        <input type="date" v-model="endDateInput" />
      </div>
      
      <div class="preset-ranges">
        <div class="ranges-label">快速选择:</div>
        <div class="range-options">
          <button 
            v-for="option in rangeOptions" 
            :key="option.value"
            @click="applyPresetRange(option.value)"
            class="range-option-btn"
          >
            {{ option.label }}
          </button>
        </div>
      </div>
      
      <div class="form-actions">
        <button class="cancel-btn" @click="$refs.datePickerForm.classList.remove('show')">取消</button>
        <button 
          class="apply-btn" 
          @click="updateDateRange(); $refs.datePickerForm.classList.remove('show')"
        >
          应用
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.date-picker-container {
  position: relative;
}

.date-picker-display {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 6px;
  padding: 6px 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.date-range-text {
  font-size: 14px;
  color: #333;
}

.edit-btn {
  margin-left: 10px;
  background: none;
  border: none;
  color: #1ac963;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.edit-btn:hover {
  background-color: #f0f0f0;
}

.date-picker-form {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 300px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 15px;
  z-index: 100;
  display: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.2s, transform 0.2s;
}

.date-picker-form.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.form-group {
  margin-bottom: 12px;
}

.form-group label {
  display: block;
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.form-group input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.preset-ranges {
  margin: 15px 0;
}

.ranges-label {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

.range-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.range-option-btn {
  background-color: #f5f5f5;
  border: none;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
  cursor: pointer;
  color: #333;
}

.range-option-btn:hover {
  background-color: #e0e0e0;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 15px;
}

.cancel-btn, .apply-btn {
  padding: 6px 12px;
  border-radius: 4px;
  font-size:.13px;
  cursor: pointer;
}

.cancel-btn {
  background-color: #f5f5f5;
  border: none;
  color: #666;
}

.apply-btn {
  background-color: #1ac963;
  border: none;
  color: white;
}

.cancel-btn:hover {
  background-color: #e0e0e0;
}

.apply-btn:hover {
  background-color: #16b057;
}
</style>